<script setup lang="ts">
import {computed, ref} from 'vue'
import {getSearchProduct} from "../../api/product.ts";
import ProductItem from "../../components/ProductItem.vue";

const category = ref<[]>([])
const minPrice = ref()
const maxPrice = ref()
const productName = ref('')
const productList = ref<any[]>([])
const page = ref(1)
const pageSize = ref(3)
const totalPage = ref(1)

const searchDisable = computed(() => !category.value.length && !minPrice.value && !maxPrice.value && !productName.value)
function search(){

  getSearchProduct({
    name : productName.value,
    categories : category.value.join(','),
    max_price : maxPrice.value == undefined ? '' : maxPrice.value,
    min_price : minPrice.value == undefined ? '' : minPrice.value,
    page : page.value,
    pageSize : pageSize.value
  }).then(res =>{
    productList.value = res.data.result.content
    totalPage.value = res.data.result.totalPages
  })
}
function newSearch(){
  page.value = 1;
  search();
}
function changePage(newPage: number){
  page.value = newPage;
  search();
}
</script>

<template>
  <div class="search-container">
    <div class="filters">
      <div class="filter-options">
        <el-select
            v-model="category"
            multiple
            placeholder="请选择种类"
            style="width: 200px;"
        >
          <el-option value="0" label="食品"></el-option>
          <el-option value="1" label="服饰"></el-option>
          <el-option value="2" label="家具"></el-option>
          <el-option value="3" label="电子产品"></el-option>
          <el-option value="4" label="娱乐"></el-option>
          <el-option value="5" label="体育产品"></el-option>
          <el-option value="6" label="奢侈品"></el-option>
        </el-select>

        <div class="price-range">
          <label>价格区间</label>
          <el-input-number v-model="minPrice" controls-position="right" placeholder="最小价格"></el-input-number>
          <label>至</label>
          <el-input-number v-model="maxPrice" controls-position="right" placeholder="最大价格"></el-input-number>
        </div>
      </div>

      <div class="search-bar">
        <el-input v-model="productName" placeholder="请输入商品名称" class="product-input"></el-input>
        <el-button type="primary" @click="newSearch" :disabled="searchDisable">搜索</el-button>
      </div>
    </div>
  </div>
    <el-main class="all-product-main">
      <ProductItem
          class="product-item-list"
          v-for="product in productList"
          :key="product.id"
          :id="product.id"
      ></ProductItem>
    </el-main>
  <div class="pagination-container">
    <el-pagination background layout="prev, pager, next" :page-count="totalPage" @current-change="changePage" />
  </div>
</template>

<style scoped>
.search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.filters {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 60%;
  margin-bottom: 20px;
}

.filter-options {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}

.price-range {
  display: flex;
  align-items: center;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 20px;
}

.product-input {
  flex: 1;
  margin-right: 10px;
}

.all-product-main {
  display: flex;
  flex-direction: row;
  padding: 20px;
  flex-flow: wrap;
  align-content: start;
  justify-content: start;
}
.pagination-container {
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 20px;
  width: 100%;
}
</style>
